window.addEventListener("load", function () {
	const apiTypeData = [
		{ name: "全部", keyword: "身份证实名", isnew: false },
		{ name: "生活服务", keyword: "银行卡", isnew: false },
		{ name: "金融科技", keyword: "短信", isnew: false },
		{ name: "交通地理", keyword: "天气", isnew: false },
		{ name: "充值缴费", keyword: "短信", isnew: false },
		{ name: "数据智能", keyword: "手机归属地", isnew: false },
		{ name: "企业工商", keyword: "IP", isnew: false },
		{ name: "应用开发", keyword: "手机归属地", isnew: false },
		{ name: "电子商务", keyword: "IP", isnew: false },
		{ name: "吃喝玩乐", keyword: "视频", isnew: false },
		{ name: "文娱视频", keyword: "视频", isnew: false },
		{ name: "免费接口大全", keyword: "短信", isnew: true },
		{ name: "短信", keyword: "身份证实名", isnew: false },
		{ name: "汽车", keyword: "银行卡", isnew: false },
		{ name: "核验", keyword: "银行卡", isnew: false },
		{ name: "最新发布", keyword: "银行卡", isnew: true },
		{ name: "API私有化部署", keyword: "身份证实名", isnew: true },
	];
	console.log("11");
	let html = "";
	apiTypeData.forEach(function (v, i) {
		if (i === 0) {
			html += `<li class="one" title=${v.keyword}>${v.name}</li>`;
		} else if (v.isnew) {
			html += `<li class="fw-bold" title=${v.keyword}>${v.name}</li>`;
		} else {
			html += `<li title=${v.keyword}>${v.name}</li>`;
		}
	});
	$("#apilist").innerHTML = html;

	// 功能二:api分类点击后增加激活样式
	$("#apilist li").forEach(function (v) {
		v.addEventListener("click", function () {
			// 先排他,清除其他激活的li
			$("#apilist li").forEach(function (item) {
				item.classList.remove("one");
			});
			// 再给当前被点击的对象增加激活样式
			this.classList.add("one");

			// 功能三:点击API分类区的标签,联动下方搜索框
			$(".inp1 span").textContent = this.textContent;
			$(".inp1 input").value = this.title;
		});
	});
	//API列表区域 模拟服务器返回的数据
	let listDataArr = [
		//第一行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},

		//第二行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第三行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第四行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
	];
	// 	let apitContent = "";
	// 	listDataArr.forEach(function (v) {
	// 		apitContent += `
	//     <li class="rel">
	//     ${v.isSpecial ? '<span class="abs">企业专用</span>' : ""}
	//     <img src="../imgs/${v.img}" alt="" />
	//     <p>${v.name}</p>
	//     <p class=${v.isSpecial ? "fc-red" : "fc-green"}>${v.price}</p>
	//     <a class="abs" href="">申请数据</a>
	// </li>`;
	// 	});
	// 	// 将样式放入li
	// 	$(".apitList").innerHTML = apitContent;
	// 点击首页实现跳转
	$(".indnode").addEventListener("click", function () {
		window.open("../html/index.html");
	});

	//翻页的小圆点
	$(".page li")[0].classList.add("two");
	$(".page li").forEach(function (v) {
		v.addEventListener("click", function () {
			$(".page li").forEach(function (item) {
				item.classList.remove("two");
			});
			this.classList.add("two");
			render(Number(v.textContent), 5, listDataArr);
		});
	});
	function render(pagination, pageSize, arr) {
		// 获取开始下标
		let startIndex = (pagination - 1) * pageSize;
		const result = arr.slice(startIndex, startIndex + pageSize);
		let cardsHtml = "";
		result.forEach(function (v) {
			cardsHtml += `
			<li class="rel">
			${v.isSpecial ? '<span class="abs">企业专用</span>' : ""}
			<img src="../imgs/${v.img}" alt="" />
			<p>${v.name}</p>
			<p class=${v.isSpecial ? "fc-red" : "fc-green"}>${v.price}</p>
			<a class="abs" href="">申请数据</a>
		</li>
			`;
		});
		$(".apitList").innerHTML = cardsHtml;
	}
	// 页面加载时调用
	render(1, 5, listDataArr);
	//点击申请数据弹出蒙层
	$(".apitList").addEventListener("click", function (event) {
		// 根据事件的localName,event.target.nodeName属性区分
		console.log(event.target.localName, event.target.nodeName);
		if (event.target.localName === "a") {
			// 弹出蒙层
			$(".mask").style.display = "block";
			document.body.style.overflow = "hidden";
			event.preventDefault();
		}
	});

	// 点击蒙层关闭蒙层
	$(".mask").addEventListener("click", function () {
		this.style.display = "none";
		document.body.style.overflow = "auto";
	});

	// 阻止登录框事件传播
	$(".masklog").addEventListener("click", function (event) {
		event.stopPropagation();
	});

	// 点击按钮,对应按钮激活,显示对应form表单
	$(".masklog form")[0].style.display = "block";
	$(".masksome a").forEach(function (v, i) {
		v.addEventListener("click", function () {
			$(".masksome a").forEach(function (item, index) {
				item.classList.remove("active");
			});
			// 再给当前点击的a标签增加激活样式
			this.classList.add("active");
			// 排他,移除所有显示的form表单
			$(".masklog form").forEach(function (each) {
				each.style.display = "none";
			});
			// 显示对应的form表单
			$(".masklog form")[i].style.display = "block";
		});
	});
});
